<template>
  <div style="margin: 0 auto">
    <div v-if="!isReg">
      <el-form :model="form">
        <el-form-item label="邮箱号" label-width="80">
          <el-input v-model="form.uemail" placeholder="请输入邮箱" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80">
          <el-input v-model="form.upassword" placeholder="请输入密码" autocomplete="off" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 100%;margin-top: 20px;" @click="login">登  录</el-button>
      </div>
    </div>
    <register v-else></register>
    <div class="tooltip-box" v-if="!isReg">
      <span class="r-span">还没有账号？ <a @click="isReg=true">点击注册</a></span>
    </div>
    <div class="tooltip-box" v-else>
      <span class="r-span">已有账号？ <a @click="isReg=false">点击登录</a></span>
    </div>
  </div>
</template>

<script>
import register from "@/components/user/register";
import {userLogin} from "@/api/login";

export default {
  components:{register},
  inject: ['reload'],
  name: "login",
  data() {
    return {
      form: {
        uemail: "",
        upassword: ""
      },
      isReg: false,
    }
  },
  methods: {
    login(){
      if (this.form.uemail === '' || this.form.upassword === ''){
        this.$message.error("请输入账号与密码再登录");
        return;
      }
      userLogin(this.form).then(res => {
        if (res.data.code === '8888'){
          localStorage.setItem('token', res.data.result.token);
          localStorage.setItem('uid', res.data.result.uid);
          localStorage.setItem('nick_name', res.data.result.nickName);
          setTimeout(() =>{
            this.$message({
              message: '注册成功',
              type: 'success'
            });
          }, 1000);
          window.location.reload()
        }else{
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.tooltip-box {
  margin-top: 20px;
  text-align: right
}
</style>
